<template>
	<view>
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="iamg-a" :src="detail.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="flex justify-around">
			<view v-for="(item,index) in detail.list" :key="index" :class="['text-center padding-sm tab',{active:tabIdx}]" @click="tabIdx=index">
				<view>{{item.spec}}</view>
				<view>{{item.weight}}</view>
				<view>{{item.edible}}</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥{{detail.list[tabIdx].price}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			{{detail.list[tabIdx].ahead}}
			<text class="margin-lr">10cm*20cm</text>
			{{detail.list[tabIdx].edible}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			{{detail.list[tabIdx].fittings}}
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button @click="handleAdd({...detail,indx:tabIdx})" class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				tabIdx:0,
				detail:null
			}
		},
		methods: {
			handleBack(){
				uni.navigateBack({
					data:1
				})
			},
			handleMy(){
				// uni.navigateTo({  //不能跳转底部菜单
				// 	url:'../my/my'
				// })
				uni.switchTab({  //底部菜单
					url:'../food/food'
				})
			},
			//调用
			...mapMutations({
				handleAdd:'cart/cartAddMut'
			})
		},
		onLoad(){
			uni.getStorage({
				key:'detail',
				success: (res) => {
					// console.log(res);
					this.detail = res.data
					console.log(this.detail);
				}
			})
		}
	}
</script>

<style>
/* .banner{
	width: 375upx;
	height: 375upx;
} */
.iamg-a{
	width: 375upx; 
	height: 375upx;
}
</style>
